import React, { Component } from 'react';
import { Card, Row, Col, Button, Divider, Input, Select, Upload, message } from 'antd';
import '../../assets/style/shop/shopAdd.scss'

import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
const { Option } = Select;
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

function beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
}


class ShopAdd extends Component {
  state = {
    loading: false,
  };

  handleChange = info => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl =>
        this.setState({
          imageUrl,
          loading: false,
        }),
      );
    }
  };


  render() {
    const style = {
      padding: '8px 0'
    };
    const { loading, imageUrl } = this.state;
    const uploadButton = (
      <div>
        {loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    return (
      <div className='shophead'>
        <Card className='shopCard'>
          <div className='partone'>
            <Row>
              <Col className='one' span={24}>商品管理&gt;新增商品(零售)</Col>
            </Row>
            <Row>
              <Col span={20}></Col>
              <Col span={4}><Button className='btnone' type="primary">发布</Button>
                <Button>取消</Button>
              </Col>
            </Row>
            <div className='basic'>商品基本信息</div>
            <div className='seletone'>
              <div><span>商品名称： </span><Input className='inone' placeholder="请填商品名称，最多20字" /></div>
              <div><span>上架状态：  </span>   <Select
                mode="multiple"
                placeholder="Please select"
                style={{ width: '400px' }}
              >
                <Option value="jack">促销中</Option>
                <Option value="lucy">已售罄</Option>
                <Option value="tom">仓库中</Option>
                <Option value="tom">出售中</Option>
              </Select></div>
            </div>
            <div className='seletone1'><div>商品描述： </div>
              <textarea className='inone' /></div>

          </div>
          <div className='parttwo'>
            <div className='pic'>商品图片</div>
            <Row>
              <Col><div className='pictwo'>首页大图</div>
              </Col>
              <Col><div className='pictwo'>详情页大图</div></Col>
            </Row>
            <Row>
              <Col>  <Upload
                name="avatar"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                beforeUpload={beforeUpload}
                onChange={this.handleChange}
              >
                {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
              </Upload></Col>
              <Col>
                <Upload
                  name="avatar"
                  listType="picture-card"
                  className="avatar-uploader upfish"
                  showUploadList={false}
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  beforeUpload={beforeUpload}
                  onChange={this.handleChange}
                >
                  {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                </Upload></Col>
            </Row>
            <Row>
              <Col><div className='pictwo'>商品正文</div></Col>

            </Row>
            <Row>
              <Upload
                name="avatar"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                beforeUpload={beforeUpload}
                onChange={this.handleChange}
              >
                {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
              </Upload>
            </Row>
          </div>
          <div className='partthree'>
            <Divider orientation="left">商品规格</Divider>
            <Row gutter={[16, 24]}>
              <Col className="gutter-row" span={3}>
                <div style={style}>商品原价</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>促销价</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>商品成本价</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>快递价格</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>购买数量限制</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>商品库存</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>列表排序</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>供货商及联系方式</div>
              </Col>

              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col> <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>

            </Row>
            <Divider orientation="left">商品浏览信息</Divider>
            <Row gutter={[16, 24]}>
              <Col className="gutter-row" span={3}>
                <div style={style}>创建时间</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>历史访问量</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>今日访问量</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>本周访问量</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>本月访问量</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>商城排行</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>本周排序变化</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>浏览转换比</div>
              </Col>

              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col> <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>

            </Row>
            <Divider orientation="left">商品销售信息</Divider>
            <Row gutter={[16, 24]}>
              <Col className="gutter-row" span={3}>
                <div style={style}>创单总量</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>历史销售总量</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>今日销售量</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>本周销售量</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>本月销售量</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>商城排行</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>本周排序变化</div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}>退货数量</div>
              </Col>

              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>
              <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col> <Col className="gutter-row" span={3}>
                <div style={style}><Input></Input></div>
              </Col>

            </Row>

          </div>
        </Card >
      </div>
    );
  }
}

export default ShopAdd;